Google Charts ব্যবহার করে আপনি Bubble Chart, Scatter Chart, Line Chart সহ বিভিন্ন ধরনের চার্টের ডেটা পয়েন্টের সাইজ এবং রঙ কাস্টমাইজ করতে পারেন। এটি আপনাকে ডেটাকে আরও আকর্ষণীয়ভাবে এবং বোধগম্যভাবে উপস্থাপন করতে সহায়তা করে।
এখানে আমরা দেখবো কিভাবে Bubble Chart এর ডেটা পয়েন্টের Size এবং Color কাস্টমাইজ করা যায়।
১. Bubble Chart এর Data Point Size এবং Color কাস্টমাইজ করা
Bubble Chart এর মাধ্যমে আপনি প্রতিটি বুদ্বুদের আকার এবং রঙ কাস্টমাইজ করতে পারেন, যা ডেটার বিশদ বিশ্লেষণ ও উপস্থাপনকে আরও কার্যকরী করে তোলে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bubble Chart with Custom Size and Color</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'bubble']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Bubble Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Size');
data.addColumn('string', 'Category');
// ডেটা প্রস্তুত করা
data.addRows([
[80, 167, 120, 'Category 1'],
[79, 136, 130, 'Category 2'],
[78, 154, 140, 'Category 3'],
[81, 151, 150, 'Category 4'],
[82, 145, 160, 'Category 5'],
[77, 129, 170, 'Category 6'],
[85, 150, 180, 'Category 7']
]);
var options = {
title: 'Bubble Chart with Custom Size and Color',
hAxis: {title: 'X Axis (Value)'},
vAxis: {title: 'Y Axis (Value)'},
bubble: {
textStyle: {fontSize: 11},
stroke: 'black', // বুদ্বুদগুলোর স্ট্রোক কালার কাস্টমাইজ
},
legend: { position: 'none' },
tooltip: { isHtml: true },
colorAxis: {
colors: ['#FF5733', '#33FF57', '#3357FF'] // রঙ কাস্টমাইজেশন
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Bubble Chart with Custom Size and Color</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {packages: ['corechart', 'bubble']});এখানে আমরা corechart এবং bubble প্যাকেজ লোড করছি, যা Bubble Chart তৈরি করতে সহায়ক।
ডেটা টেবিল তৈরি করা:
data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn('number', 'Size'); data.addColumn('string', 'Category');এখানে আমরা ডেটা যোগ করার জন্য চারটি কলাম যুক্ত করেছি:
- X: এক্স অক্ষের মান
- Y: ওয়াই অক্ষের মান
- Size: বুদ্বুদের আকার
- Category: প্রতিটি বুদ্বুদটির জন্য একটি ক্যাটেগরি (শ্রেণী)
- বুদ্বুদগুলোর আকার কাস্টমাইজ করা:
- Size কলামে প্রতিটি বুদ্বুদের আকার দেয়া হয়েছে, যেগুলি X এবং Y ভ্যালুর সাথে সম্পর্কিত।
- আপনি Size এর মান বৃদ্ধি বা হ্রাস করতে পারেন, এটি বুদ্বুদের আকারের সাথে সম্পর্কিত হবে।
বুদ্বুদগুলোর রঙ কাস্টমাইজ করা:
colorAxis: { colors: ['#FF5733', '#33FF57', '#3357FF'] // রঙ কাস্টমাইজেশন }এখানে colorAxis ব্যবহার করে আমরা বিভিন্ন রঙ নির্ধারণ করেছি। আপনি এখান থেকে আপনার পছন্দমত রঙ সেট করতে পারেন। এটি বুদ্বুদগুলোর জন্য একটি গ্রেডিয়েন্ট রঙ নির্ধারণ করবে।
স্ট্রোক কালার কাস্টমাইজ করা:
bubble: { textStyle: {fontSize: 11}, stroke: 'black', // বুদ্বুদগুলোর স্ট্রোক কালার কাস্টমাইজ }এই অপশনের মাধ্যমে আপনি বুদ্বুদগুলোর চারপাশে একটি স্ট্রোক (আউটলাইন) যোগ করতে পারেন এবং তার রঙ কাস্টমাইজ করতে পারেন।
২. Bubble Chart এর Customization
এছাড়া, আপনি Bubble Chart এর আরও অনেক কাস্টমাইজেশন করতে পারেন, যেমন:
Text Style: বুদ্বুদগুলোর টেক্সটের ফন্ট সাইজ, স্টাইল, অথবা বোল্ড/ইটালিক স্টাইল পরিবর্তন করা।
bubble: { textStyle: {fontSize: 14, color: 'black', bold: true} }Tooltip Customization: আপনি টুলটিপ কাস্টমাইজ করতে পারেন, যাতে আপনি বুদ্বুদ ক্লিক করলে আরও বিস্তারিত তথ্য দেখতে পারেন।
tooltip: { isHtml: true, trigger: 'selection' }Bubbles with Different Opacity: আপনি বুদ্বুদগুলির স্বচ্ছতা বা opacity নির্ধারণ করতে পারেন।
colorAxis: { opacity: 0.7 }
উপসংহার
Google Charts এর মাধ্যমে Bubble Chart তৈরি করা এবং এর ডেটা পয়েন্টের সাইজ ও রঙ কাস্টমাইজ করা একটি শক্তিশালী পদ্ধতি ডেটা ভিজ্যুয়ালাইজেশনের জন্য। এটি ডেটার মধ্যে সম্পর্ক ও পার্থক্যগুলো সহজভাবে এবং আকর্ষণীয়ভাবে উপস্থাপন করতে সাহায্য করে। এই কাস্টমাইজেশনগুলো আপনার ডেটার বিশ্লেষণ আরও স্পষ্ট এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
